<template>
    <div class="contain">
        <div class="search-contain">
            <div class="item">
                <div class="name">产品ID</div>
                <div class="info">
                    <el-input v-model="searchParams.productId" style="width: 200px" placeholder="请输入" />
                </div>
            </div>
            <div class="item">
                <div class="name">产品名称</div>
                <div class="info">
                    <el-input v-model="searchParams.productName" style="width: 200px" placeholder="请输入" />
                </div>
            </div>
            <div class="item">
                <div class="name">产品数量</div>
                <div class="info">
                    <el-input v-model="searchParams.quantity" style="width: 200px" placeholder="请输入" />
                </div>
            </div>
            <div class="item">
                <div class="name">产品价格</div>
                <div class="info">
                    <el-input v-model="searchParams.price" style="width: 200px" placeholder="请输入" />
                </div>
            </div>
            <div class="item">
                <el-button type="primary" @click="searchHandle">搜索</el-button>
                <el-button type="primary" plain @click="resetHandle">重置</el-button>
            </div>
        </div>
        <TableComponent v-if="!isEmptyObject(goodsData)" :columnList="columnList" :data="goodsData"
            @size-change="sizeChange" @current-change="currentChange">
            <template #operate="{ scope }">
                <div class="operate-content">
                    <div class="col-1" @click="operateHandle(1, scope)">新增</div>
                    <div class="col-2" @click="operateHandle(2, scope)">删除</div>
                    <div class="col-1" @click="operateHandle(3, scope)">修改</div>
                </div>
            </template>
        </TableComponent>

        <!-- 新增-修改 -->
        <template v-if="showDialogVisible">

            <el-dialog v-model="showDialogVisible" :title="goodsTitle" width="500">
                <el-form :model="goodsForm">

                    <el-form-item label="产品名称" :label-width="formLabelWidth">
                        <el-input v-model="goodsForm.productName" autocomplete="off" />
                    </el-form-item>

                    <el-form-item label="产品数量" :label-width="formLabelWidth">
                        <el-input v-model="goodsForm.quantity" autocomplete="off" />
                    </el-form-item>

                    <el-form-item label="产品价格" :label-width="formLabelWidth">
                        <el-input v-model="goodsForm.price" autocomplete="off" />
                    </el-form-item>

                </el-form>

                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="resetDialogVisible">取消</el-button>
                        <el-button type="primary" @click="saveHandle">
                            确认
                        </el-button>
                    </div>
                </template>
            </el-dialog>

        </template>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessageBox } from 'element-plus'
import type { Action } from 'element-plus'
import { isEmptyObject } from '@/common/utils/commonUtils'
import TableComponent from '@/common/components/TableComponent.vue';

import { storeToRefs } from 'pinia';
import { goodsStore } from '@/stores/goodsStore';
import type { GoodsItem } from "@/types/goods.d.ts"

const { goodsData } = storeToRefs(goodsStore())

const columnList = [
    {
        columnKey: 'productId',
        columnName: '产品ID'
    },
    {
        columnKey: 'productName',
        columnName: '产品名称'
    },
    {
        columnKey: 'quantity',
        columnName: '产品数量'
    },
    {
        columnKey: 'price',
        columnName: '产品价格'
    },
    {
        columnKey: 'operate',
        slotName: 'operate',
        width: '200',
        columnName: '操作'
    },
]

/**  搜索条件 */
let searchParams = ref({
    productId: '',
    productName: '',
    quantity: '',
    price: ''
})

/**  搜索 */
const searchHandle = (page = { pageCurrent: 1, pageSize: 10 }) => {
    goodsStore().getGodes({ ...searchParams.value, ...page })
}

/**  重置 */
const resetHandle = () => {

    searchParams.value = {
        productId: '',
        productName: '',
        quantity: '',
        price: ''
    }

    searchHandle()
}

const sizeChange = (e: number) => {
    let page = {
        pageCurrent: 1,
        pageSize: e
    }

    searchHandle({ ...page })
}

const currentChange = (e: number) => {
    let page = {
        pageCurrent: e,
        pageSize: goodsData.value?.pageSize ?? 10
    }

    searchHandle({ ...page })
}

/**  获取数据 */
searchHandle()

let showDialogVisible = ref(false)
let formLabelWidth = 100
let goodsTitle = ref('新增')

let goodsForm = ref(
    {
        productId: '',
        productName: '',
        quantity: '',
        price: ''
    }
)

/**  操作 */
const operateHandle = (type: number, scope: any) => {
    const { row } = scope

    if (type === 1) {
        goodsTitle.value = '新增'
        showDialogVisible.value = true

    }

    if (type === 2) {
        deleteRowHandle(row)

        return
    }

    if (type === 3) {
        goodsTitle.value = '编辑'
        const { productId, productName, quantity, price } = { ...row }
        goodsForm.value = { productId, productName, quantity, price }

        showDialogVisible.value = true
    }
}

/**  删除 */
const deleteRowHandle = (row: GoodsItem) => {
    ElMessageBox.confirm(
        '您是否要删除该数据?',
        // '删除',
        {
            distinguishCancelAndClose: true,
            confirmButtonText: '确认',
            cancelButtonText: '取消',
        }
    )
        .then(async () => {
            const { productId } = row
            const { code } = await goodsStore().deleteGoods({ productId })

            !code && searchHandle()
        })
        .catch((action: Action) => {
            console.log(111, action);
        })
}

/**  取消 */
const resetDialogVisible = () => {
    goodsForm.value = {
        productId: '',
        productName: '',
        quantity: '',
        price: ''
    }

    showDialogVisible.value = false
}

/**  保存 */
const saveHandle = async () => {
    let result = -1
    const { productId } = goodsForm.value
    console.log('productId: ', goodsForm.value);

    if (productId) {
        const { code } = await goodsStore().updateGoods(goodsForm.value)
        result = code
    } else {
        const { code } = await goodsStore().createGoods(goodsForm.value)
        result = code
    }

    if (result === 0) {
        searchHandle()
        resetDialogVisible()
    }
}

</script>

<style lang="less" scoped>
.contain {

    .search-contain {
        display: flex;
        margin-bottom: 12px;

        .item {
            display: flex;
            margin-right: 20px;

            .name {
                line-height: 32px;
                margin-right: 4px;
                text-align: right;
            }
        }
    }

    .operate-content {
        display: flex;
        justify-content: space-around;

        &>div {
            cursor: pointer;
        }

        .col-1 {
            color: #409eff;
        }

        .col-2 {
            color: #f56c6c;
        }
    }
}
</style>